/* Customize the scrollbar in Firefox */
@supports not selector(::-webkit-scrollbar) {
  .sidebar-body {
    @apply pr-4;
    scrollbar-color: var(--token-color-palette-neutral-300) transparent;
  }
}

.sidebar {
  @apply relative z-10 flex max-h-full flex-col pb-4;

  &.collapsed {
    @apply w-16;

    .sidebar-header {
      @apply relative h-full flex-col px-0;
    }

    .sidebar-dashboard-link {
      @apply absolute left-1/2 bottom-4 -translate-x-1/2;
    }

    .sidebar-header-icon-controls {
      @apply flex-col-reverse items-center space-y-2 space-y-reverse;
    }
  }

  // Status dropdown
  .hds-button {
    &.in-review {
      // palette-purple-500 @ 40%
      border-color: #42215b66;

      // palette-purple-500 @ 60%
      color: #43205a99;
    }

    &.approved {
      // palette-green-500 @ 40%
      border-color: #05422066;

      // palette-green-500 @ 60%
      color: #05422199;
    }
  }

  .editable-field-container {
    @apply mt-[3px];

    &.select-input {
      @apply -mx-[8px] mt-[-8px] -mb-[8px];

      .x-dropdown-list-toggle-select {
        @apply items-start py-[7px] px-[6px] shadow-none;

        &:not(:hover, :focus, :focus-visible, .open) {
          .flight-icon-caret {
            @apply hidden;
          }
        }
      }
    }
  }

  .editable-field {
    .edit-overlay-affordance {
      @apply pb-[125px];

      &::before {
        @apply from-color-page-faint via-color-page-faint-90 to-transparent;
      }
    }
  }

  .sidebar-header {
    @apply sticky top-0 z-10 flex justify-between bg-color-page-faint px-3.5 py-4;

    &.scrolled {
      box-shadow: 0 1px 0 0 rgba(0, 0, 0, 15%);
    }
  }

  .quarternary-button {
    @apply relative;

    @keyframes slideDownAndRotateLeft {
      to {
        transform: translateY(18px) rotate(-360deg);
      }
    }

    &.out {
      animation:
        fadeOut 50ms ease-out 200ms forwards,
        slideDownAndRotateLeft 250ms ease-out forwards;
    }
  }

  .sidebar-header .quarternary-button {
    @apply px-3 py-2;
  }

  .draft-visibility-button {
    @apply flex items-center px-2.5;
    // match the height of the header buttons
    @apply h-[38px];
    // offset the extra height relative to the badge
    @apply my-[-7px];
  }

  .sidebar-header-icon-controls {
    @apply flex;
  }

  .sidebar-body {
    @apply relative h-full overflow-y-scroll;

    .sidebar-body-container {
      @apply space-y-8 pt-7 pb-10 pl-7 pr-3;
    }

    /* Style the scrollbar for Chrome, Safari, and Opera. */
    &::-webkit-scrollbar {
      @apply w-4 bg-transparent;
    }

    &::-webkit-scrollbar-thumb {
      @apply min-h-[40px] rounded-t-full rounded-b-full border-[4.5px] border-solid border-transparent bg-color-palette-neutral-300 bg-clip-padding;

      &:hover {
        @apply bg-color-palette-neutral-400;
      }
    }
  }

  .document-title {
    .field-toggle,
    textarea {
      @apply text-display-300 font-semibold text-color-foreground-strong;
    }
  }

  .sidebar-section-header-container {
    @apply flex w-full items-center justify-between;

    .quarternary-button {
      @apply rounded;
      @apply h-[26px] w-[26px];
      @apply -mr-0.5;

      &.disabled {
        @apply cursor-not-allowed opacity-50;
      }
    }
  }

  .sidebar-section-header {
    @apply hds-foreground-faint text-body-100 font-regular;
  }

  .primary-textarea {
    @apply min-h-[76px];
  }

  .person-list {
    @apply grid w-full gap-2.5;
  }

  .sidebar-footer {
    @apply w-full shrink-0 bg-color-page-faint py-4 px-3.5;
  }
}
